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INTERACTIVE EXAMPLES FOR ONLINE CODING TUTORIALS 

Field Of The Invention 

This invention relates generally to methods 
and apparatus for providing examples in online coding 
5 tutorials. More specifically, the present invention 
provides methods and apparatus for generating 
interactive coding examples in online tutorials for 
computer languages . 

Background Of The Invention 

10 The Internet and the World Wide Web 

(hereinafter "the web") have revolutionized the ways in 
which information is disseminated and shared. A wide 
variety of information can be simultaneously accessed 
by multiple users through a new category of documents 

15 designed to easily represent content for display and 
transmission over the Internet. These new documents, 
often referred to as electronic documents or web pages, 
are increasingly replacing their traditional paper 
counterparts as the medium through which business is 

20 carried out. 

An electronic document is a multimedia 
composition that is displayed to the user on a "web 
browser window" by "web browser software". Electronic 
documents may contain text, audio, graphics, imagery, 

25 and video content, as well as nearly any other type of 
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content that may be experienced through use of a 
computer or other electronic devices. Additionally, 
electronic documents may be interactive, and may 
contain user selectable links that cause other 
5 electronic documents to be accessed. 

Electronic documents are used in many 
creative and diverse fields, including entertainment, 
commerce, government, and education. In particular, 
the easy access to information in electronic documents 

10 has transformed education, enabling students and 

teachers to participate in a rich learning environment. 
Lectures, research materials, and other course 
components may be made available on demand, allowing 
students with a computer connected to the Internet to 

15 have. access to educational material from any place at 
any time. 

The Internet provides a very effective 
environment for the collaborative learning of various 
topics, especially when it involves the use of a 

20 computer, such as, for example, learning computer 
languages. Students can access a number of online 
tutorials on computer languages, learn about the 
languages' keywords and syntax, and immediately apply 
the concepts learned in the tutorials by writing and 

25 executing programs on the same computer where the 
tutorials are being displayed. The students can 
further share their programs with others for review, by 
including them in electronic documents accessible over 
the Internet. This process has considerably 

30 facilitated the learning of computer languages for many 
users, including the growing community of non- 
technically savvy users who desire to be proficient in 
creating computer applications. 

Online computer language tutorials are 
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essentially a set of electronic documents explaining 
the language syntax and providing examples on how the 
language is used to implement computer programs. The 
examples are usually a set of instructions or exercises 
5 for the user to perform. Some online tutorials may 
provide an interactive window in the electronic 
document, such as an editing window, for the user to 
type in the example instructions. This activity takes 
place in the user's computer, with the web browser 

10 software displaying the example instructions and the 
interactive window. The user may select a "submit" 
button associated with the interactive window for 
execution of the example instructions. Once the submit 
button is selected, the web browser software 

15 establishes a connection over the Internet between the 
user's computer and a "web server", which is 
responsible for the execution of the instructions typed 
in the interactive window displayed in the user' s 
computer. The example instructions are then processed 

20 by the web server, and the results are sent back to the 
user's computer over the Internet. The results of the 
example instructions are displayed in another 
electronic document in the user' s computer once the web 
browser software handles the web server's response. 

25 This type of online tutorial has several 

significant drawbacks. First, depending on the 
Internet connection the user has, it may take several 
minutes for the user to type the example instructions 
in the interactive window of the electronic document, 

30 send the example instructions for processing at the web 
server, and get the results back. Under heavy Internet 
congestion, it may take several processing requests 
before the web server responds with the example 
results. This problem is accentuated if the example 
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itself requires user interaction. 

Second, this type of online tutorial does not 
enable the user to easily and quickly modify the 
example instructions to see how they could be adapted 
5 to a particular situation. Modifying the example 

instructions would require the user to perform several 
steps, including: (1) executing the original example 
instructions; (2) sending the appropriate requests to 
the server; (3) analyzing the example results; (4) 

10 generating the modified set of instructions; (5) 

sending the new requests to the server for executing 
the modified instructions; and (6) analyzing the new 
example results and comparing them to the original 
example results. This process may be repeated multiple 

15 times, and in certain circumstances, it may be hard for 
the user to keep track of which changes in the example 
instructions produced which set of results. This 
usually occurs when the results are displayed in 
several "pop-up windows" that may be accidentally 

20 closed by the user, or when the results are displayed 
in the same web browser window used by the tutorial to 
display the original instructions, which would require 
the user to select the "back" button on the web browser 
repeatedly to view the original instructions. The 

25 latter approach is the one adopted by an online 
tutorial on the SQL database language. 

Finally, if the user makes an error when 
typing the example instructions, the server typically 
responds with an error message that simply says an 

30 error occurred without giving the user further 

indications of why the typed example instructions could 
not be executed properly. Users may get frustrated 
with the lack of guidance provided by such examples. 

In view of the drawbacks above, it would be 
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desirable to provide methods and apparatus for 
generating coding examples in online tutorials for 
computer languages that overcome these drawbacks. 

It would further be desirable to provide 
5 methods and apparatus for generating coding examples in 
electronic documents that can be processed in the 
user's computer. 

It would still further be desirable to 
provide methods and apparatus for generating 
10 interactive coding examples in electronic documents 
that enable the user to easily view, modify, and 
execute the example instructions. 

It would also be desirable to provide methods 
and apparatus for generating coding examples that 
15 provide suitable error messages when the user makes a 
mistake when writing the example source code. 

Summary Of The Invention 

In view of the foregoing, it is an object of 
the present invention to provide methods and apparatus 
20 for providing interactive coding examples in online 
computer language tutorials that overcome the various 
drawbacks described hereinabove. 

It is another object of the present invention 
to provide methods and apparatus for generating coding 
25 examples in electronic documents that can be processed 
in the user's computer. 

It is a further object of the present 
invention to provide methods and apparatus for 
generating interactive coding examples in electronic 
30 documents that enable the user to easily view, modify, 
and execute the example instructions. 

It is also an object of the present invention 
to provide methods and apparatus for generating coding 
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examples that provide suitable error messages when the 
user makes a mistake when writing the example source 
code . 

These and other objects of the present 
5 invention are accomplished by providing methods and 
apparatus for generating interactive coding examples 
that enable an user to easily view, modify, and execute 
the examples on the user's computer. The interactive 
examples are embedded in electronic documents that are 

10 part of online tutorials for computer languages. 

In a preferred embodiment, the methods of the 
present invention for providing interactive examples in 
online coding tutorials involve three major steps: (1) 
defining an example markup in the language used to 

15 generate the electronic documents for the online 
tutorials; (2) processing the example content to 
convert it into a displayed form; and (3) creating an 
interactive example window. 

More specifically, the present invention 

20 provides a specially designed example markup to create 
and display interactive example windows in online 
computer language tutorials. The interactive example 
window contains three sub-windows, hereinafter referred 
to as "widgets", consisting of: (1) an interactive 

25 editing widget for displaying the example content and 
enabling the user to modify the example content; (2) a 
control affordances widget containing a set of control 
buttons for the user to apply to the example content; 
and (3) an example result widget for displaying the 

30 example results and allowing the user to interact with 
the example result. 

An important advantage of the present 
invention inheres in the fact that all operations 
performed by the user on the interactive example may be 
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processed in the user's computer. This avoids 
connecting to a web server, sending requests to the web 
server to perform the operations, and waiting for the 
web server to respond with the operations' results. 
5 Another technical advantage of the present 

invention inheres in the fact that it enables users to 
easily and quickly modify the example source code, 
analyze the example results, debug the example content, 
and repeat the process using the same interactive 
10 example window. 

Other technical advantages of the present 
invention will become apparent to one of ordinary skill 
in the art in view of the drawings and detailed 
description of the embodiments of the invention. 

15 Brief Description Of The Drawings 

The above and other objects of the present 
invention will be apparent upon consideration of the 
following detailed description, taken in conjunction 
with the accompanying drawings, in which like reference 

20 characters refer to like parts throughout, and in 
which : 

FIG. 1 is a schematic view of a computer 
system suitable for use with the present invention; 

FIG. 2 shows the network environment in which 
25 the present invention operates; 

FIG. 3 illustrates the example markup used to 
include examples in online tutorials; 

FIG. 4 is a flow chart for executing the 
example markup; 
30 FIG. 5 is a schematic view of a preferred 

embodiment of an interactive example window for use 
with the present invention; 

FIG. 6 is a schematic view of a preferred 
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embodiment of a control affordances widget for the 
interactive example window; 

FIG. 7 shows an error message window for use 
with the present invention; 
5 FIGS. 8A, 8B, 8C, 8D, and 8E show an example 

use of the present invention; and 

FIGS. 9A and 9B show an example web browser 
window displaying an online coding tutorial containing 
an interactive example window and the source code used 
10 to display the online coding tutorial and example in 
the web browser window. 



Detailed Description Of The Invention 

The present invention provides interactive 
coding examples in online computer language tutorials 

15 that are designed as electronic documents. It should 
be noted that as used herein, an "electronic document" 
comprises a source file or collection of files written 
using one or more language tools for displaying content 
accessible with web browser software. The content may 

20 consist of text, audio, graphics, imagery, and video, 
as well as any other type of content that may be 
experienced through use of web browser software. 
Additionally, electronic documents may be interactive, 
and may contain user selectable links that cause other 

25 electronic documents to be accessed. 

As used herein, online computer language 
tutorials consist of a collection of electronic 
documents containing specialized content describing the 
computer language syntax and other language features 

30 and how they are used to implement computer programs. 
The computer language may be any type of language 
designed to enable humans to communicate with or 
control computers, including programming languages such 
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as C, markup languages such as HTML, script languages 
such as PERL, and database query languages such as SQL, 
among others. The online tutorials may contain coding 
examples showing how to use language elements and 
5 expressions to implement certain features in computer 
programs. The coding examples may also be interactive, 
containing control buttons for the user to operate to 
better understand how the coding example works. 

Referring to FIG. 1, a computer system 

10 suitable for use with the present invention is 
described. Computer system 10 includes at least 
processor 11, for processing information according to 
programmed instructions, memory 12, for storing 
information and instructions for processor 11, storage 

15 system 13, such as a magnetic or optical disk system, 
for storing large amounts of information and 
instructions on a relatively long-term basis, and 
display system 14, such as a computer monitor, for 
displaying various graphical elements that facilitate 

20 user interaction with computer system 10. These 

graphical elements include graphical user interfaces 
(GUI) of software applications, windows for displaying 
Internet content through a web browser, and various 
"pop-up" windows that are triggered by user interaction 

25 with a given application, such as pop-up windows that 
display the results of an online coding example. 

Memory 12 contains instructions for web 
browser software as well as for an "example execution 
engine", consisting of instructions for executing 

30 source code examples in online computer language 

tutorials. The execution engine may be embedded in a 
web browser, may be a software plug-in for the web 
browser, or it may be a stand-alone software 
application. In the latter case, the web browser 
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software would contain instructions for accessing the 
execution engine. Processor 11, memory 12, storage 
system 13, and display system 14 are coupled to bus 15, 
which preferably provides a high-speed means for 
5 devices connected to bus 15 to communicate with each 
other . 

It will be apparent to one of ordinary skill 
in the art that computer system 10 is illustrative, and 
that alternative systems and architectures may be used 
10 with the present invention. It will further be 

understood that many other devices, such as a network 
interface (not shown) , and a variety of other input and 
output devices (not shown) may be included in computer 
system 10. 

15 Referring now to FIG. 2, an overview of a 

network environment in which a preferred embodiment of 
the present invention operates is shown. Client 
computer 16 ("client") uses web browser software to 
communicate across the Internet with server computer 17 

20 ("server") . Server 17 executes web server software to 
process requests from client computers on the Internet, 
such as client computer 16. Server 17 responds to 
these requests by sending electronic documents, 
executable code, or data to client 16, which may be 

25 part of an online computer language tutorial for 

display with the web browser software in client 16. In 
accordance with the present invention, interactive 
examples embedded in the tutorial are executed by an 
example execution engine on client 16. 

30 Additionally, server 17 may contain "search 

engine" software for locating electronic documents on 
the Internet. Server 17 may also handle database 
management tasks, as well as a variety of 
administrative tasks, such as compiling usage 
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statistics. Alternatively, some or all of these tasks 
may be performed by computers 18a-c, connected to 
server 17 through local area network 19, It will be 
understood by one skilled in the art that there are 
5 millions of web servers connected to the Internet, and 
millions of client computers running web browser 
software. If server 17 has sufficient capacity, at any 
given time it may be in communication with thousands of 
client computers, 

10 Web servers 2 0a-c are computers that provide 

access to electronic documents that may be found 
through use of a search engine provided by server 17. 
When a user of client 16 selects an electronic document 
from the search engine results provided by server 17, 

15 client 16 may communicate across the Internet with one 
of web servers 20a-c. 

Further, one skilled in the art will 
understand that the present invention could also be 
used in other network settings. For example, rather 

20 than connecting through the Internet, the apparatus and 
methods of the present invention could be used on a 
local area network. In such a configuration, the 
clients and server would all be connected to the same 
local area network. The methods and apparatus of the 

25 present invention may also be used in configurations in 
which the clients are also servers, that is, the 
clients and servers are the same computer. This would 
reduce the communications latency between user requests 
on the client and response to the user requests on the 

30 server. 

Referring now to FIG. 3, an example markup 
used to include coding examples in an electronic 
document that is part of a computer language tutorial 
is described. A "markup" refers to a sequence of 
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characters or other symbols that are inserted at 
certain places in the source code file of an electronic 
document to indicate how the electronic document should 
look when it is printed or displayed, or to describe 
5 the electronic document's logical structure. The 
markup indicators are often called "tags", and may 
comprise a starting tag and a termination tag. Tags 
are usually followed by source code content that is 
executed and displayed in the electronic document. In 

10 case the markup indicator consists of a starting tag 
and a termination tag, source code content is included 
between the starting tag and the termination tag. For 
example, using the <UL> (starting tag for an unnumbered 
list) , </UL> (termination tag for an unnumbered list) , 

15 and <LI> (list item) tags in the HTML language to 

display a list of fruits would require the following 
piece of source code in the electronic document: 

<UL> 

<LI> apples 
2 0 <LI> bananas 

<LI> grapefruit 
</UL> 

The web browser software would display the following 
output in the web browser window: 

25 • apples 

• bananas 

• grapefruit 

Markup tags can be inserted by the electronic 
document creator directly by typing the symbols in the 
30 source code file of the electronic document, by using 
an editor and selecting prepackaged markup symbols (to 
save keystrokes) , or by using a more sophisticated 
editor that enables users to create the document as 
they want it to appear. 

35 Example markup 21 comprises example markup 

tag 22, which is defined according to the 
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specif ications of the language used to create the 
electronic document. Example markup tag 22 may be the 
string "<example>" or any other string defined in the 
language specification for including source code for 
5 example content 23 in the electronic document. For 
example, in an online tutorial for HTML, an example 
markup may be created and placed in a tutorial for 
showing the user how to create a list of fruits as 
described above. The example markup may consist of the 
10 following source code: 

<example> 

This is a list of fruits. 
<UL> 

<LI> apples 
15 <LI> bananas 

<LI> grapefruit 

</UL> 
</ example> 

The source code content included in the example markup 

20 is executed at the client computer by an example 
execution engine. 

Referring now to FIG. 4, a flow chart for 
executing example markup 21 is described. At step 25, 
the example execution engine processes the example 

25 source code to produce the example result. The example 
source code may contain simple instructions for 
displaying text such as the list of fruits example 
above, or it may generate more sophisticated 
applications, involving audio, imagery, video, and user 

30 interactivity. An interactive example window is 

created at step 26 to display the example source code, 
the example result, and control mechanisms to enable 
users to easily and quickly modify the example source 
code, analyze the example results, debug the example 

35 source code, and repeat the process using the same 
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interactive example window. The interactive example 
window is displayed in a web browser window at step 27. 

Referring now to FIG. 5, a preferred 
embodiment of an interactive example window for use 
5 with the present invention is described. Interactive 
example window 29 is a two-dimensional viewing area in 
the web browser display that allows users to view the 
example source code and results, as well as modify and 
execute the example. Interactive example window 29 

10 contains three sub-windows, or widgets: example result 
widget 30, interactive editing widget 31, and control 
affordances widget 32. Example result widget 30 is a 
viewing area for displaying the results of the 
execution of the example source code content, displayed 

15 in interactive editing widget 31. 

Interactive editing widget 31 is a simple 
editor that allows a user to modify the example source 
code content in editing widget 31 and directly typing 
the desired source code modifications. Preferably, 

20 editing widget 31 supplies common editing features such 
as copying and pasting. Operations on interactive 
editing widget 31 such as executing the example source 
code and restoring the displayed example source code to 
its original form are performed when the user interacts 

25 with control buttons provided in control affordances 
widget 32. 

Referring now to FIG. 6, a preferred 
embodiment of a control affordances widget for an 
interactive example window is described. Control 
30 affordances widget 32 may include the following control 
buttons for accepting user interaction: "execute" 
control button 33, "revert" control button 34, "full 
edit" control button 35, "save as" control button 36, 
and "close pop-up" control button 37. When the user 
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selects execute control button 33, the example 
execution engine processes the example source code 
displayed in interactive editing widget 31 and displays 
the example results to the user. The example results 
5 may be displayed in example result widget 30, or in a 
"pop-up" window. Revert control button 34 may be 
selected by the user to display the original example 
source code in interactive editing widget 31. This 
option may be selected in case the user wants to 

10 compare the original example source code with any 

source code modifications the user makes in interactive 
editing widget 31. 

A more complete editing window may be opened 
by the user by selecting full edit control button 35. 

15 Selecting this button causes a pop-up editor window to 
be displayed in the user's computer display screen. 
The pop-up window contains the example source code 
content displayed in interactive editing widget 31 and 
may be integrated with the development environment for 

20 the language used to write the example source code. 

This enables the user to more easily edit, execute, and 
debug the example source code. In case the user wants 
to save the example source code in a separate file, the 
user may select "save as" control button 36. "Close 

25 pop-up" control button 37 may be selected to close a 
pop-up window displaying example results. 

Referring now to FIG. 7, an error message 
window for use with the present invention is described. 
Error message window 38 is a learning aid offered with 

30 the interactive example so the user may easily debug 

and understand mistakes made when modifying the example 
source code. Error message window 38 contains standard 
buttons 39, 40, and 41, for minimizing, maximizing, and 
closing the window, respectively. Error message 42 
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contains text revealing to the user the mistakes made 
when modifying the example source code, with possible 
suggestions as to where in the source code each mistake 
was made. Error message window 38 contains "view 
5 error line" control button 43 that, when selected, 
opens a full editor window displaying the modified 
source code. The line in the source code containing 
the error is highlighted in color or otherwise marked 
to call attention to the error. The user may then 

10 correct the error in the opened full editor window, 
copy the corrected source code text into interactive 
editing window 31, and execute the example by selecting 
execute control button 33. 

Referring now to FIGS. 8A, 8B, 8C, 8D, and 

15 8E, an example of using the method of the present 
invention is described. Referring to FIG. 8A, 
interactive example window 4 5 shows exemplary CURL 
language source code for printing out a list of 
ancestors. The CURL content programming language and 

20 its features are described in the commonly owned, 

copending, U.S. patent application No. 

(CURL-002) . 

Interactive example window 45 is displayed in 
an electronic document that is part of an online 

25 tutorial for the CURL language. The example source 

code is displayed in interactive editing widget 47, and 
the result of executing the example source code is 
shown in example result widget 46. The user may 
interact with the example by modifying the example 

30 source code displayed in interactive editing widget 47 
and by using one of the control buttons displayed in 
control affordances widget 48. 

Referring to FIG. 8B, interactive example 
window 4 5 shows that the example source code in 
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interactive editing widget 49 has been modified by 
changing "Your ancestors" to "My ancestors" and adding 
the ancestors' names. By clicking on the execute 
control button of control affordances widget 48, the 
5 modified example is executed by the example execution 
engine in the user's computer. Referring to FIG. 8C, 
example result pop-up window 50 is a pop-up window that 
displays the results of executing the modified example 
source code. Alternatively, the example results may be 

10 displayed in example result widget 46. 

Referring now to FIG. 8D, interactive editing 
widget 51 shows modified example source code that 
contains typing error 52. When the user selects the 
execute control button in control affordances widget 

15 48, an error will occur. Referring now to FIG. 8E, 
error message window 53 is displayed to the user to 
indicate that an error occurred in the execution of the 
example source code. Error message window 53 shows 
error message 54, containing detailed information about 

20 the type of error made by the user. Error message 
window 53 also contains "view error line" control 
button 55 to open a full edit window displaying the 
example source code. The full edit window highlights 
the text line in the example source code that contains 

25 the error, thus facilitating the error debugging and 
the learning of the programming language. 

Referring now to FIG. 9A, an example web 
browser window displaying an online coding tutorial 
containing an interactive example window is shown. Web 

30 browser window 56 displays text 57 and 59 explaining 
features of the CURL language. Example window 58 
displays an example for computing the square root of a 
number and can be modified by a user as described 
above . 
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Th e example source code for displaying the 
online coding tutorial text and example shown in FIG. 
9A in a web browser window is shown in FIG. 9B. The 
example source code in the CURL language contains 
5 paragraph markup 60 and example markup 61 for 

displaying a text paragraph and an interactive example 
window, respectively. Text paragraph 62 refers to a 
feature of the CURL language used in example 63. 
Example markup 61 causes example 63 to be displayed in 

10 interactive example window 58 of FIG. 9A. 

Although particular embodiments of the 
present invention have been described above in detail, 
it will be understood that this description is merely 
for purposes of illustration. Specific features of the 

15 invention are shown in some drawings and not in others, 
and this is for convenience only and any feature may be 
combined with another in accordance with the invention. 
Steps of the described processes may be reordered or 
combined, and other steps may be included. Further 

20 variations will be apparent to one skilled in the art 
in light of this disclosure and are intended to fall 
within the scope of the appended claims. 

Further, one skilled in the art will 
understand that the methods and apparatus of the 

25 present invention could also be used to provide 

examples for a variety of online tutorials, such as 
tutorials for architectural software packages, 
tutorials for electrical circuit simulators, and 
tutorials for network simulators, among others. 



